import React from 'react';
import { Http, BeanUtils } from './../common/Utils';
import { CrudTable, Toolbar, EditForm, Crud } from './../common/Crud';
import { Modal, Buttonm, Divider } from 'antd';

const fileds = [
    {
        name: 'id',
        type: 'hidden'
    }, {
        name: 'type',
        label: '位置',
        type: 'select',
        options: [
            { label: '全部', value: 0 },
            { label: '首页', value: 1 }
        ],
        option: {
            initialValue: '0'
        }
    }, {
        name: 'name',
        label: '名称',
        type: 'text',
        option: {
            rules: [
                { required: true, message: '请输入' }
            ]
        }
    }, {
        name: 'platform',
        label: '使用平台',
        type: 'select',
        options: [
            { label: 'PC端', value: '1' },
            { label: '移动端', value: '2' }
        ],
        option: {
            initialValue: '1'
        }
    }, {
        name: 'url',
        label: '链接地址',
        type: 'text',
        option: {
            rules: [
                { required: true, message: '请输入' }
            ]
        }
    }, {
        name: 'sort',
        label: '排序',
        type: 'number',
        option: {
            initialValue: '1',
            rules: [
                { required: true, message: '请输入' }
            ]
        }
    }, {
        name: 'imageId',
        label: '图片',
        type: 'imageUpload',
        option: {
            rules: [
                { required: true, message: '请上传图片' }
            ]
        }
    }, {
        name: 'remark',
        label: '备注',
        type: 'textarea'
    }
];

/**
 * 幻灯片管理
 */
class Banner extends Crud {

    state = {
        url: '/api/banner',

        formModalWidth: 1000,

        /*******************搜索框***************** */
        searchField: [
            {
                name: 'type',
                label: '位置',
                type: 'select',
                options: [
                    { label: '全部', value: 0 },
                    { label: '首页', value: 1 }
                ]
            }, {
                name: 'name',
                label: '名称',
                type: 'text'
            }
        ],

        /*******************列表***************** */
        columns: [{
            title: '名称',
            dataIndex: 'name',
            sorter: true
        }, {
            title: '位置',
            dataIndex: 'type',
            render: (v, record, index) => {
                if (v == '0') {
                    return '全部';
                } else if (v == '1') {
                    return '首页';
                } else {
                    return '-';
                }
            }
        }, {
            title: '使用平台',
            dataIndex: 'platform',
            render: (v, record, index) => {
                if (v == '1') {
                    return 'PC端';
                } else if (v == '2') {
                    return '移动端';
                } else {
                    return '-';
                }
            }
        }, {
            title: '图片',
            dataIndex: 'imageId',
            render: (v, record, index) => {
                if (v) {
                    return (<img src={'/api/file/get?type=A&id=' + v} width={60} />);
                }
                return '-'
            }
        }, {
            title: '排序',
            dataIndex: 'sort'
        }, {
            title: '地址',
            dataIndex: 'url'
        }, {
            title: '备注',
            dataIndex: 'remark'
        }, {
            title: '状态',
            dataIndex: 'status',
            render: (v, record, index) => {
                if (v == '1') {
                    return '启用';
                } else if (v == '0') {
                    return '禁用';
                } else {
                    return '-';
                }
            }
        }, {
            title: '创建时间',
            dataIndex: 'createdtime'
        }, {
            title: '操作',
            dataIndex: 'id',
            render: (v, record, index) => {
                return (
                    <div>
                        {
                            record.status == '1' ?
                                <a onClick={() => this.changeStatus('0', record)}>禁用</a> :
                                <a onClick={() => this.changeStatus('1', record)}>启用</a>
                        }
                        <Divider type="vertical" />
                        <a onClick={() => this.onEdit(record)}>编辑</a>
                        <Divider type="vertical" />
                        <a onClick={() => this.onDeletet(record)}>删除</a>
                    </div>
                )
            }
        }],

        /*******************编辑表单***************** */
        addFields: BeanUtils.copy(fileds),
        editFields: BeanUtils.copy(fileds)
    }
}

export default Banner;
